<template>
  <view class="app-container">
    <!-- 路由出口：渲染当前页面 -->
    <router-view v-if="routerLoaded"></router-view>
    <view v-else class="loading-container">
      <text class="loading-text">页面加载中...</text>
    </view>
    
    <!-- 底部导航（登录页面不显示） -->
    <view class="tab-bar" v-if="routerLoaded && route.path !== '/pages/login/login'">
      <view 
        class="tab-bar-item" 
        :class="{active: currentTab === 'hall'}" 
        @click="switchTab('/pages/hall/hall', 'hall')"
      >
        <view class="tab-bar-icon">📋</view>
        <view>抢单大厅</view>
      </view>
      <view 
        class="tab-bar-item" 
        :class="{active: currentTab === 'orders'}" 
        @click="switchTab('/pages/orders/orders', 'orders')"
      >
        <view class="tab-bar-icon">📝</view>
        <view>工单</view>
      </view>
      <view 
        class="tab-bar-item" 
        :class="{active: currentTab === 'profile'}" 
        @click="switchTab('/pages/profile/profile', 'profile')"
      >
        <view class="tab-bar-icon">👤</view>
        <view>个人中心</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 1. 路由实例：确保默认获取有效路由
const route = useRoute() || { path: '/pages/login/login' } // 修改默认路径为登录页面
const router = useRouter()

// 路由加载状态
const routerLoaded = ref(false)

// 2. 登录状态：仅用于个人中心等页面判断，不影响默认进入
const getLoginStatus = () => {
  const userInfo = uni.getStorageSync('userInfo')
  return !!(userInfo && userInfo.userId)
}

// 3. 底部导航状态与切换逻辑
const currentTab = ref('hall')
const switchTab = (url, tab) => {
  // 路由跳转：优先使用 Vue Router，降级用 UniApp 原生跳转
  try {
    if (router && typeof router.push === 'function') {
      router.push(url)
    } else {
      uni.switchTab({ url })
    }
  } catch (e) {
    console.error('路由跳转异常，使用兜底方案:', e)
    uni.switchTab({ url })
  }
  currentTab.value = tab
}

// 监听路由变化以高亮对应 Tab 项
watch(() => route.path, (newPath) => {
  if (newPath.includes('hall')) {
    currentTab.value = 'hall'
  } else if (newPath.includes('orders')) {
    currentTab.value = 'orders'
  } else if (newPath.includes('profile')) {
    currentTab.value = 'profile'
  }
}, { immediate: true })

// 4. 页面初始化逻辑
onMounted(() => {
  console.log('App.vue mounted')
  setTimeout(() => {
    routerLoaded.value = true
  }, 100)
})
</script>

<style>
/* 页面容器：全屏布局，避免内容被导航栏遮挡 */
.app-container {
  padding-bottom: 100rpx; /* 预留底部导航栏空间 */
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 加载提示容器 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

/* 底部导航栏样式 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: white;
  display: flex;
  border-top: 1rpx solid #eee;
  z-index: 999;
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.tab-bar-item.active {
  color: #1677ff;
}

.tab-bar-icon {
  font-size: 40rpx;
  margin-bottom: 4rpx;
}
</style>

